<template>
  <div>
    <van-search
      v-model="value"
      shape="round"
      placeholder="请输入搜索关键词"
      @input="input(value)"
      @clear="clear"
    />
    <!-- 搜索下容器 -->
    <div class="search_wrap" v-if="list2.length == 0">
      <!-- 标题 -->
      <p class="hot_title">热门搜索</p>

      <!-- 热搜关键词容器 -->
      <div class="hot_name_wrap">
        <!-- 每个搜索关键词 -->
        <span
          @click="fn(item.first)"
          class="hot_item"
          v-for="item in list"
          :key="item.first"
          >{{ item.first }}</span
        >
      </div>
    </div>
    <div class="search_wrap" v-else>
      <!-- 标题 -->
      <p class="hot_title">最佳匹配</p>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          center
          :title="item.name"
          :label="item.ar[0].name + '-' + item.name"
          v-for="item in list2"
          :key="item.id"
        >
          <template #right-icon>
            <van-icon
              name="add-o"
              size="0.6rem"
              @click="push(item)"
              class="addo"
            />
            <van-icon
              name="play-circle-o"
              size="0.6rem"
              @click="play(item.id, item)"
            />
          </template>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { pushSong } from '@/utils/index.js'
export default {
  data () {
    return {
      value: "",
      list: [],
      list2: [],
      loading: false,
      finished: false,
      page: 1,
      timeid: 0,
    };
  },
  async created () {
    let res = await this.axios({
      url: "/search/hot",
    });

    this.list = res.data.result.hots;
    // ---------------------------------
  },
  activated () {
    this.value = ''
    this.list2 = []
  },
  methods: {
    play (a, b) {
      console.log(a);
      this.$store.commit('setId', a)
      this.$store.commit('setPlayNum')
      pushSong(b)
    },
    push (a) {
      let Glist = this.$store.state.List
      if (Glist.every(item => item.al.id != a.al.id)) {
        Glist.push(a)
        Toast.success('添加成功')
      } else {
        Toast.fail('歌曲已存在');
      }
      this.$store.commit('setList', Glist)

    },
    async fn (a) {
      this.value = a;
      let res1 = await this.getAxios();
      this.list2 = res1.data.result.songs;
    },
    input (a) {
      clearTimeout(this.timeid);

      this.timeid = setTimeout(async () => {
        if (a == "") {
          this.list2 = [];
          return;
        }

        let res1 = await this.getAxios();

        if (res1.data.result.songCount == 0) {
          this.list2 = [];
          return;
        }
        this.list2 = res1.data.result.songs;
      }, 500);
    },
    getAxios () {
      return this.axios({
        url: "/cloudsearch",
        params: {
          keywords: this.value,
          limit: 20,
          offset: (this.page - 1) * 20,
        },
      });
    },
    async onLoad () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      this.page++;
      let res2 = await this.getAxios();
      // console.log(res2);
      // 数据全部加载完成
      if (this.page * 20 >= res2.data.result.songCount) {
        this.finished = true;
        this.loading = false;
      }
      this.list2 = this.list2.concat(res2.data.result.songs);

      // 加载状态结束
      this.loading = false;
    },
    clear () {
      this.page = 1;
      this.finished = false;
    },
  },
};
</script>

<style scoped>
.addo {
  margin-right: 20px;
}
/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}

/* 给单元格设置底部边框 */
.van-cell {
  border-bottom: 1px solid lightgray;
}
</style>